<template>
  <el-dialog :title="'请选择需要关联的订单'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="接待单" name="first">
        <joinRoom ref="joinRoom" @refreClosing="refreClosing"></joinRoom>
      </el-tab-pane>
      <el-tab-pane label="预定单" name="second">
        <reserve ref="reserve" @refreClosing="refreClosing"></reserve>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
  import joinRoom from './joinRoom.vue';
  import reserve from './reserve.vue';
  import moment from 'moment';
  export default {
    data() {
      return {
        visible: false,
        activeName: 'first',
        dataForm: {
          singleId: ''
        },
      };
    },
    components: {
      reserve,
      joinRoom
    },
    methods: {
      init(singleId) {
        Object.assign(this.$data, this.$options.data());
        this.visible = true;
        this.dataForm.singleId = singleId;
        this.$nextTick(() => {
          this.$refs.joinRoom.init(this.dataForm.singleId);
        })
      },
      handleClick(tab, event) {
        if (tab.index == 0) {
          this.$nextTick(() => {
            this.$refs.joinRoom.init(this.dataForm.singleId);
          })
        } else if (tab.index == 1) {
          this.$nextTick(() => {
            this.$refs.reserve.init(this.dataForm.singleId);
          })
        }
        console.log(tab, event);
      },
      refreClosing(){
        this.visible = false
        this.$emit('refreClosing')
      }
    }
  };
</script>

<style></style>
